<template>
  <div class="main" v-if="client && client.Modules">
    <div class="item" v-if="isShow('查询')" @click="selectBizType('查询')">
      <div><i class="iconfont icon-chaxun item-icon"></i></div>
      <div class="item-text">查询</div>
    </div>
    <div class="item" v-if="isShow('建档')" @click="selectBizType('建档')">
      <div><i class="iconfont icon-fangkong item-icon"></i></div>
      <div class="item-text">建档</div>
    </div>
    <div class="item" v-if="isShow('缴费')" @click="selectBizType('缴费')">
      <div><i class="iconfont icon-jiaofei item-icon"></i></div>
      <div class="item-text">缴费</div>
    </div>
    <div class="item" v-if="isShow('充值')" @click="selectBizType('充值')">
      <div><i class="iconfont icon-cunkuan item-icon"></i></div>
      <div class="item-text">充值</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import BaseMixin from '@/mixins/base'

@Component
export default class PortraitHome extends mixins(BaseMixin) {
  private async created () {
    // this.$messageBox({ content: '您尚未建档, 是否自助建档?', confirm: () => { alert(1) } })
    this.init()
  }

  private init () {
    if (this.store.state.client) {
      this.client = this.store.state.client
    } else {
      setTimeout(() => {
        this.init()
      }, 500)
    }
  }

  private async confirm () {
    alert(1)
  }

  private isShow (name: string) {
    return this.client.Modules.findIndex(e => e.Name === name && e.IsEnable === '是') >= 0
  }

  private selectBizType (bizType: '查询' | '充值' | '缴费' | '建档') {
    this.store.state.bizType = bizType
    this.navigateTo(`/${this.getRoute()}/card`)
  }
}
</script>

<style scoped>
  .main{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .item{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 40rem;
    height: 40rem;
    background-color: white;
    margin: 2rem;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    font-size: 3rem;
  }
  .item-icon{
    font-size: 15rem;
  }
  .item-text{
    margin-top: 3rem;
  }
</style>
